<template>
  <el-dialog :visible.sync="dialogVisible" center ref="dialogRef" class="details-dialog" title="订单详情">
    <el-row style="
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      ">
      <el-button v-if="finalData.status == '2'" type="danger" size="large"
        @click.stop="orderOperation('0', finalData)">取消订单</el-button>
      <el-button v-if="finalData.status == '2'" type="danger" size="large"
        @click.stop="orderOperation('1', finalData)">订单分配</el-button>
      <el-button v-if="finalData.status == '3'" type="danger" size="large"
        @click.stop="orderOperation('2', finalData)">修改医护人员</el-button>
    </el-row>

    <div class="details-dialog-content">
      <orderInfo ref="orderInfoRef" :orderInfos="detailsInfo" :orderData="finalData" labeWidth="180px">
        <template #status>
          <el-tag :type="formatterStatus(finalData.status).type">
            {{ formatterStatus(finalData.status).name }}</el-tag>
        </template>
        <!--  支付方式 -->
        <template #pay_type>
          <span>{{ formatterPay_type(finalData.pay_type) }}</span>
        </template>
        <template #service_file>
          <tableFile :files="[finalData.service_file]" />
          <!--  <a
            style="color: blue; border-bottom: 1px solid blue"
            :href="finalData.service_file"
            target="_blank"
            >{{ finalData.service_file }}</a
          > -->
        </template>

        <template #report_type v-if="finalData.item?.report_type.length>0 && finalData.item?.report_type!='无'">
          <div style="color: blue;cursor: pointer;text-decoration: underline;" @click="handleReport(finalData)">
            {{ finalData.item?.report_type }}
          </div>
        </template>

        <template #report_type v-else>
          <div>无</div>
        </template>
        <!-- 医护人员病情记录 -->
        <template #content>
          {{ finalData.service_record?.content }}
        </template>
        <!-- 医护人员医护服务记录 -->
        <template #patient_condition>
          {{ finalData.service_record?.patient_condition }}
        </template>

        <!--  //价格详情 -->
        <template #price_Sumdetail>
          <el-collapse v-model="activeName1">
            <el-collapse-item name="activeName1">
              <div>
                <el-button type="primary" size="mini" @click="handlePrint">打印</el-button>
              </div>
              <!-- 打印 -->
              <div id="print1" v-if="isDisplay" style="width: 100%;">
                <div style="display: flex;align-items: center;width: 100%;align-items: center;justify-content: center;">
                  <h3>互联网居家服务平台费用详情</h3>
                </div>
                <div style="display: flex;align-items: center;justify-content: center;">
                  <!--  <div
                    style="width: 80%; display: grid;grid-template-columns: repeat(2, auto); justify-content: space-between;">
                    <div>就诊人：{{finalData.patient_name}}</div>
                    <div>项目名称：{{finalData.item_name}}</div>
                    <div>医护人员：{{finalData.doctor_name}}</div>
                    <div>就诊人卡号：{{finalData.medical_card}}</div>
                  </div> -->
                  <el-table border stripe :data="[finalData]">
                    <el-table-column prop="patient_name" align="center" label="就诊人">
                    </el-table-column>
                    <el-table-column prop="item_name" align="center" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="doctor_name" align="center" label="医护人员">
                    </el-table-column>
                    <el-table-column prop="medical_card" align="center" label="就诊人卡号">
                    </el-table-column>
                  </el-table>

                </div>

                <div style="display: flex;align-items: center;justify-content: center;margin-top: 15px;">
                  <el-table show-summary stripe border
                    :data="formatterPrice_detail(finalData.price_detail ,finalData.material_price_detail) ">
                    <div></div>
                    <el-table-column label="费用详情">
                      <el-table-column prop="name" align="center" label="费用名称">
                      </el-table-column>
                      <el-table-column prop="value" align="center" label="价格（元）">
                      </el-table-column>
                    </el-table-column>

                  </el-table>
                </div>

                <!--  <h4>其他费用</h4>
                <span style="margin: 10px" v-for="(item, index) in formatterPrice_detail(
              finalData.price_detail
            )" :key="index">
                  {{ item.name }}
                  <span style="font-weight: bold; color: orange">{{
              item.value
            }}</span>元
                </span> -->
              </div>
              <!-- 不打印 -->
              <div v-else style="width: 100%;">
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 15px;">
                  <el-table show-summary border
                    :data="formatterPrice_detail(finalData.price_detail,finalData.material_price_detail) ">
                    <el-table-column prop="name" align="center" label="费用名称">
                    </el-table-column>
                    <el-table-column prop="value" align="center" label="价格（元）">
                    </el-table-column>
                  </el-table>
                </div>

                <!--  <h4>其他费用</h4>
                <span style="margin: 10px" v-for="(item, index) in formatterPrice_detail(
              finalData.price_detail
            )" :key="index">
                  {{ item.name }}
                  <span style="font-weight: bold; color: orange">{{
              item.value
            }}</span>元
                </span> -->
              </div>
              <!--  <div>
                <h4>耗材费用</h4>
                <span style="margin: 10px" v-for="(item, index) in formatterPrice_detail(
              finalData.material_price_detail
            )" :key="index">
                  {{ item.name }}
                  <span style="font-weight: bold; color: orange">{{ item.value }} </span>元
                </span>
              </div> -->
            </el-collapse-item>
          </el-collapse>
        </template>

        <template #supplementary_form>
          <el-collapse v-model="activeName2">
            <el-collapse-item name="activeName2">
              <div style="width: 100%;">
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 15px;">
                  <el-table border :data="finalData.extend_order">
                    <el-table-column prop="title" align="center" label="费用名称">
                    </el-table-column>
                    <!--       <el-table-column prop="amount" align="center" label="价格（元）">
                    </el-table-column> -->
                    <el-table-column prop="desc" align="center" label="费用说明">
                    </el-table-column>
                    <!--      <el-table-column prop="status" align="center" label="支付状态">
                    </el-table-column>
                    <el-table-column prop="pay_time" width="160px" align="center" label="支付时间">
                    </el-table-column> -->
                    <el-table-column align="center" label="图片">
                      <template slot-scope="scope">
                        <tableFile :files="scope.row.pic.split(',')" />
                      </template>

                    </el-table-column>

                    <!--    <tableFile :files="finalData.patient_pic.split(',')" /> -->
                  </el-table>
                </div>

                <!--  <h4>其他费用</h4>
                <span style="margin: 10px" v-for="(item, index) in formatterPrice_detail(
              finalData.price_detail
            )" :key="index">
                  {{ item.name }}
                  <span style="font-weight: bold; color: orange">{{
              item.value
            }}</span>元
                </span> -->
              </div>
            </el-collapse-item>
          </el-collapse>
        </template>

        <template #evaluation_etails>
          <el-collapse v-if="userComment">
            <el-collapse-item name="1">
              <div>
                <h4>用户评价</h4>
                <span style="margin: 10px;">
                  服务态度：
                  <span style="font-weight: bold; color: orange">{{ userComment?.score1 }}星</span>
                </span>
                <span style="margin: 10px;">
                  专业水平：
                  <span style="font-weight: bold; color: orange">{{ userComment?.score2 }}星</span>
                </span>
                <span style="margin: 10px;">
                  操作规范:
                  <span style="font-weight: bold; color: orange">{{ userComment?.score3 }}星</span>
                </span>
              </div>
              <div>
                <h4>医护人员评价</h4>
                <span style="margin: 10px">
                  <span style="color: orange">{{ doctorComment?.label }} </span>
                </span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </template>
        <!-- 历史评价 -->
        <template #historical_evaluation>
          <el-collapse v-if="commentList?.length>0">
            <el-collapse-item name="1">
              <el-timeline>
                <div v-for="item in commentList" :key="item.created_at">
                  <el-timeline-item :timestamp="item.created_at" placement="top">
                    <el-card>
                      <h4>{{item.item_name}}</h4>
                      <p>{{item.label}}</p>
                    </el-card>
                  </el-timeline-item>
                </div>
              </el-timeline>

            </el-collapse-item>
          </el-collapse>

        </template>

        <!-- 订单审核 -->

        <template #patient_pic>
          <!--   {{ finalData.patient_pic.split(",") }} -->
          <div @click.stop="">
            <tableFile :files="finalData.patient_pic.split(',')" />
            <!--  <tablePrImg
              v-if="finalData.patient_pic"
              :imgSrc="finalData.patient_pic"
              :prImgList="[finalData.patient_pic]"
            /> -->
          </div>
        </template>
      </orderInfo>
      <div class="content-right">
        <el-tabs v-model="activeName">
          <el-tab-pane label="服务流程" name="statuss">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in timeLineArr" :key="index" :timestamp="item.created_at"
                placement="top">
                <p>{{ item.name }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
          <el-tab-pane label="付款流程" name="status">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in timeLinePay" :key="index" :timestamp="item.created_at"
                placement="top">
                <p>{{ item.name }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <orderReviewHandle ref="orderReview" @refresh="handleClose" />
    <orderAllocation ref="orderAllocation" @refresh="handleClose" />
    <!--     <addRemarkDialog ref="addRemarkDialog" :type="2" @refresh="refresh2" /> -->

    <detailDialog ref="detailDialog"></detailDialog>
  </el-dialog>
</template>

<script>
import orderReviewHandle from "./orderReviewHandle.vue";
import orderAllocation from "./orderAllocation.vue";
import { ApiOrderTimeLine, ApiGetOrderDetailData, ApiGetOrderCommentList } from "@/api/index";
import orderInfo from "@/components/orderInfo.vue";
import { detailsInfo } from "../config";
import tablePrImg from "@/components/tablePrImg.vue";
import tableFile from "@/components/tableFile.vue";
import printJS from "print-js";
import detailDialog from "./detailDialog.vue";
export default {
  components: {
    orderInfo,
    tablePrImg,
    orderReviewHandle,
    orderAllocation,
    tableFile,
    detailDialog
  },
  data() {
    return {
      activeName1: 'activeName1',
      activeName2: '',
      isDisplay: false,
      dialogVisible: false,
      detailsInfo,
      finalData: [],
      timeLineArr: [],
      timeLinePay: [],
      activeName: "statuss",
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "待接单",
          code: "2",
          type: "",
        },
        {
          name: "已接单",
          code: "3",
          type: "warning",
        },
        {
          name: "已出发",
          code: "4",
          type: "warning",
        },
        {
          name: "已上门",
          code: "5",
          type: "warning",
        },
        {
          name: "已完成",
          code: "6",
          type: "success",
        },
        {
          name: "已取消",
          code: "7",
          type: "danger",
        },
        {
          name: "已评价",
          code: "8",
          type: "success",
        },
      ],
      doctorComment: [],
      userComment: [],
      commentList: []
    };
  },
  methods: {
    //化验报告类型
    handleReport(e) {
      this.$refs.detailDialog.show(e)
    },


    /*  calculateSummary({ columns, data }) {
       const sums = [];
       columns.forEach((column, columnIndex) => {
         if (column.property === 'amount') {
           let total = 0;
           data.forEach((item) => {
             total += Number(item[column.property]);
           });
 
           sums[columnIndex] = total.toFixed(2);
         }
         if (column.property === 'title') {
 
           sums[columnIndex] = '合计'
         }
       });
       return sums;
 
     }, */

    handlePrint() {
      this.isDisplay = true
      /*   setTimeout(() => {
          this.isDisplay = false
        }, 1000); */
      this.$nextTick(() => {
        const style = '@page {margin: auto;  } ' + '@media print {tr{height:40px}td{border:1px    solid #000;text-align:center;height:40px}th{border:1px solid #000} }';//这里修改的是el-table边框问题
        printJS({
          printable: 'print1',	//打印区域id
          type: 'html',		//打印类型是html
          scanStyles: false,
          style: style,
          targetStyles: ['*'],
        })
        this.isDisplay = false
      })

    },

    /*    //打印
       handlePrint() {
         printJS({
           printable: "print1", //打印区域id
           type: "html", //打印类型
           scanStyles: false,
         });
       }, */


    orderOperation(val, row) {
      if (val == 0) {
        this.$refs.orderReview.show(row);
      } else if (val == 1) {
        this.$refs.orderAllocation.show(row);
      } else {
        this.$refs.orderAllocation.show(row);
      }
    },

    formatterStatus(val) {
      let data = this.statusFormatter.find((item) => {
        if (item.code == val) {
          return item;
        }
      });
      if (data) {
        return data;
      } else {
        return val;
      }
    },
    formatterPay_type(val) {
      if (val == "1") {
        return "微信支付";
      } else {
        return val;
      }
    },
   /*  formatterPrice_detail(val, mat) {
      let priceArr, mat1
      try {
        priceArr = JSON.parse(val);
      } catch {
        priceArr = [];
      }
      try {
        mat1 = JSON.parse(mat);
      } catch {
        mat1 = [];
      }


      let dataV = [priceArr, mat1]
      let data = [];
      dataV.forEach((item, index) => {
        for (const key in item) {
          data.push({ name: key, value: dataV[index][key] });
        }
      })
      return data;
    }, */

     formatterPrice_detail(val, mat) {
      if (val && mat) {
        let priceArr = JSON.parse(val);
        let mat1 = JSON.parse(mat);
        let dataV = [priceArr, mat1]
        let data = [];
        dataV.forEach((item, index) => {
          for (const key in item) {
            data.push({ name: key, value: dataV[index][key] });
          }
        })
     

        return data;
      }
    },
    show(row) {
      this.commentList = []
      ApiGetOrderDetailData(row.id).then(res => {
        this.getTimeLine(row.id);
        //历史评价
        this.getOrderCommentList(row.id)
        this.finalData = res.data.orderData;
        //医生评价
        this.doctorComment = res.data.doctorComment
        //用户评价
        this.userComment = res.data.userComment
        this.dialogVisible = true;
      })
    },

    getOrderCommentList(id) {
      ApiGetOrderCommentList(id).then(res => {
        if (res.data.length > 0) {
          this.commentList = res.data
        }
      })
    },

    handleClose() {
      this.dialogVisible = false;
      this.$emit("refresh");
    },
    //获取订单进度列表
    getTimeLine(id) {
      //全部相关
      ApiOrderTimeLine(id).then((res) => {
        this.timeLineArr = res.data.all;
        this.timeLinePay = res.data.pay;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-icon-arrow-right:before {
  content: "点击展开";
  font-size: 15px;
  font-family: "heiti";
  color: #2295ff;
  font-weight: bold;
}
/deep/ .el-collapse-item__arrow.is-active {
  transform: none;
}
/deep/ .el-collapse-item__arrow.is-active::before {
  content: "点击收起";
  font-size: 15px;
  font-family: "heiti";
  color: #2295ff;
  font-weight: 600;
}

/* /deep/ .el-icon-arrow-right:before {
  content: "点击展开";
} */

/* .el-icon-arrow-right:before {
    content: "\e6e0";
} */
.pantentItem:hover {
  color: skyblue;
}
.changePatentBtn {
  display: flex;
  justify-items: center;

  flex-wrap: wrap;
  .pantentItem {
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer !important;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

.details-dialog {
  /deep/.el-dialog {
    min-width: 1300px;
  }
  /deep/.btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .el-button {
      height: 40px;
      // padding: 8px 20px;
    }

    > span {
      margin-bottom: 10px;
    }
  }
  &-content {
    display: flex;
    max-height: 80vh;
    overflow: auto;
    padding-bottom: 6px;
    /deep/ .el-form {
      flex: 1;
      padding-right: 20px;
    }
    .content-right {
      padding-left: 20px;
      box-sizing: border-box;
      width: 300px;
    }

    /deep/.el-image,
    .tableFile {
      padding: 5px 0;
      vertical-align: middle;
    }
  }
  /deep/.el-rate {
    display: inline-block;
  }
  /deep/.el-timeline-item__content {
    padding-right: 10px;
  }
  .none {
    display: none;
  }
  .display {
    display: inline;
  }
}

/* /deep/ .el-dialog__wrapper {
  height: 500px !important;
  overflow: auto;
} */
</style>
